<!DOCTYPE html>
<html>

	<head>
		<title>系统登录</title>
		<meta charset="UTF-8">
		<title>Basic Layout - jQuery EasyUI Demo</title>
		<link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.2/themes/default/easyui.css">
		<link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.2/themes/icon.css">
		<link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.2/demo.css">
		<link rel="icon" type="image/x-icon" href="/image/carpark_32.png">

		<script type="text/javascript" src="jquery-easyui-1.5.2/jquery.min.js"></script>
		<script type="text/javascript" src="jquery-easyui-1.5.2/jquery.easyui.min.js"></script>
		<script type="text/javascript" src="js/syExtEasyUI.js"></script>
		<script type="text/javascript">
			var checkLogin = false;
			$(function() {
				$('form :input:first').focus();
				$('form :input').keyup(function(event) {
					if(event.keyCode == 13) {
						loginFun();
					}
				});
//				$("#userName").focus();
				$('#userName').next('span').find('input').focus();
			});
			var loginFun = function() {
				var $form = $('form');
				if(!$form.form('validate')) {
					return;
				}
				$("#testButton").attr("disabled","true");
				$.post('/loginUser', $form.serialize(), function(result) {
					if(result.success) {
						window.location.href = '/'
					} else {
						$.messager.alert('提示', result.msg, 'error', function() {
							$("#testButton").attr("disabled","false");
						});
						$("#testButton").attr("disabled","false");
					}
				}, 'json');
			};
		</script>
		<style type="text/css">
			#testButton {
				color: rgb(255, 255, 255);
				font-size: 19px;
				padding-top: 5px;
				padding-bottom: 5px;
				padding-left: 20px;
				padding-right: 20px;
				border-width: 0px;
				border-color: rgb(197, 229, 145);
				border-style: solid;
				border-radius: 5px;
				background-color: rgb(101, 76, 184);
				cursor: hand;
			}
			
			#testButton:hover {
				color: #1c171c;
				background-color: #78c300;
				border-color: #c5e591;
				cursor: pointer;
			}
		</style>
	</head>

	<body style="margin: 0;padding: 0;overflow: hidden;width: 100%;">
		<div style="background-color: black;width: 25%;height: 400px;position:absolute;top:10%;right: 50%;margin-right: -150px;
			border-radius:15px;filter: Alpha(Opacity=30, Style=0);opacity: 0.30; z-index: 20;max-width: 300px;min-width:280px ;">

		</div>
		<div id="" style="width: 25%;height: 400px;position:absolute;top:10%;right: 50%;margin-right: -150px;
			border-radius: 5px;z-index: 30;max-width: 300px;min-width:280px ;">
			<div style="text-align: center;margin-top: 30px;">
				<img style="width: 64px;height: 64px;" src="style/images/donglu_64.png" />
			</div>
			<div style="color: white;text-align: center;width: 100%;font-size: 1.3em;margin-top: 20px;">
				LORA管理系统
			</div>
			<form id="form">
				<div style="text-align: center;margin-top: 30px;width: 100%;">
					<input id="userName" name="userName" style="width: 90%;height: 35px;padding-left: 20px;" class="easyui-textbox" data-options="prompt:'请输入您的账号',required:true,iconCls:'icon-man'" />
				</div>
				<div style="text-align: center;margin-top: 20px;width: 100%;">
					<input id="password" name="password" style="width: 90%;height: 35px;padding-left: 20px;" class="easyui-passwordbox" data-options="prompt:'请输入您的密码',required:true,lastDelay:0,checkInterval:0" />
				</div>
			</form>
			<div style="text-align: center;margin-top: 30px;width: 100%;">
				<button onclick="loginFun()" style="width: 90%;" id="testButton">登  录</button>
			</div>
		</div>
		<div style="width: 100%;height: 100%;z-index: 20;overflow: hidden;">
			<img src="background.png" style="width: 100%;height: 100%;" />
		</div>

	</body>

</html>